<template>
  <ul class="page-product">
    <div class="asd" :style="note" v-for="item in types" :key="item._id" width="375px">
      <img :src="'./static/img/product/' + item.img" alt="" width="170px" height="22px" class="img">
      <h2>{{item.title}}</h2>
      <h2>{{item.title1}}</h2>
      <div class="phone">
        <img :src="'./static/img/product/' + item.img1" alt="" width="337px" height="264px">
        <div class="phone1">
          <img :src="'./static/img/product/' + item.img2" alt="" width="101px" height="180px">
        </div>
        <div class="phone2">
          <img :src="'./static/img/product/' + item.img3" alt="" width="112px" height="200px">
        </div>
        <div class="phone3">
          <img :src="'./static/img/product/' + item.img4" alt="" width="100px" height="180px">
        </div>
      </div>
    </div>
    <router-link :to="'/'" tag="li" v-for="list in list" :key="list._id" :style="list.icon">
         <h1>{{list.title}}</h1>
        <p>{{list.title1}}</p>
        <div class="phone_1">
          <img :src="'./static/img/product/' + list.img" alt="" width="225px" height="430px">
          <div class="phone_2">
            <img :src="'./static/img/product/' + list.img2" alt="" width="198px" height="354px">
          </div>
        </div>
    </router-link>
    <!-- <router-link :to="'/'" tag="li" v-for="list in list" :key="list._id">
         <h1>{{list.title}}</h1>
        <p>{{list.title1}}</p>
        <div class="phone_1">
          <img :src="'./static/img/product/' + list.img" alt="" width="225px" height="412px">
          <div class="phone_2">
            <img :src="'./static/img/product/' + list.img2" alt="" width="198px" height="354px">
          </div>
        </div>
    </router-link> -->
    
    
  </ul>
</template>
<style lang="less" scoped>
.qmkg-product {
    position: fixed;
    z-index: 1000;
    left: 0;
    width: 100%;
}
.page-product {
    width: 375px;
    height:667px;
  .asd{
    width: 375px;
    height:667px;
    
    background: no-repeat center;
    background-size: contain;
    .img{
      margin-top:180px;
    }
    h2{
      font-size: 24px;
      color:#fff;
      font-weight: normal;
    }
    .phone{
      margin-top: 15px;
      position: relative;
      .phone1{
        position: absolute;
        top:39px;
        left:6px;
      }
      .phone2{
        position: absolute;
        top:30px;
        left:112px;
      }
      .phone3{
        position: absolute;
        top: 39px;
        right: 45px;
      }
    }
  }
  li{
    width: 100%;
    height: 667px;
    overflow: hidden;
    position: relative;
    h1{
      white-space: nowrap;
      position: absolute;
      font-weight:normal;
      font-size: 35px;
      top: 110px;
      left: 50%;
      transform: translateX(-50%);
    }
    p{
      white-space: nowrap;
      position: absolute;
      top: 160px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 14px;
    }
    .phone_1{
      position: absolute;
      top: 260px;
      left: 50%;
      transform: translateX(-50%);
      .phone_2{
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      }
    }
  }
}
</style>
<script>
export default {
    //同步数据
    data() {
      return {
        types: [
          {id:0, img:'feature_title@2x.png', title:'歌房互动 新增榜单', title1:'更多玩法 等你来玩',
          img1:'feature_phone.png', img2:'feature_1.jpg', img3:'feature_2.jpg', img4:'feature_3.jpg'}
        ],
        list: [
          {id:0, title:'丰富榜单', title1:'点歌台改造，锁定你想要的歌',img:'feature_bg_phone.png', img2:'feature_1.jpg',
          icon: {
            backgroundImage:'url(' + require('../../public/static/img/product/feature_bg1.jpg') + ')'
          }},
          {id:1, title:'精彩抢先', title1:'动态页曝光，实时参与歌房和直播',img:'feature_bg_phone.png', img2:'feature_2.jpg',
          icon: {
            backgroundImage:'url(' + require('../../public/static/img/product/feature_bg2.jpg') + ')'
          }},
          {id:2, title:'歌房作品发布', title1:'发布在歌房中演唱的优秀作品',img:'feature_bg_phone.png', img2:'feature_3.jpg',
          icon: {
            backgroundImage:'url(' + require('../../public/static/img/product/feature_bg3.jpg') + ')'
          }},
          {id:3, title:'下载作品', title1:'随时随地想听就听 !',img:'feature_bg_phone.png', img2:'feature_4.jpg',
          icon: {
            backgroundImage:'url(' + require('../../public/static/img/product/feature_bg4.jpg') + ')'
          }},
          {id:4, title:'任务中心', title1:'更多鲜花福利等你来 !',img:'feature_bg_phone.png', img2:'feature_5.jpg',
          icon: {
            backgroundImage:'url(' + require('../../public/static/img/product/feature_bg5.jpg') + ')'
          }}
        ],
      note: {
          backgroundImage:'url(' + require('../../public/static/img/product/feature_bg_phone.jpg') + ')'
      }
    }
  }
}
</script>